<template>
  <view :class="'components-home commonDiv ' + (judgeFlag !== 'false' ? 'judgeBox' : '')">
    <view class="header-top">
      <view class="header-inner">
        <view class="name">
          <view class="headImg"></view>
          {{ infoBbj.teacherName }}
        </view>
        <view class="logOut">
          <view class="logOutInner" @click="logOutHandle" >登出</view>
        </view>
      </view>
    </view>
    <!-- <header-com @stopInterval='stopInterval' :name='infoBbj.teacherName'></header-com> -->
    <view class="indexBg">
      <image class="indexImg" src='@/static/img/OSCE.png'/>
      <image class="indexIcon" src='@/static/img/indexIcon.png' />
    </view>
    <view v-if="infoBbj.teacherName && judgeFlag === 'false'">
      <view class="content-box">
        <view class="teacher-info">
          <view class="info-left">
            <!-- <view class='img-box'></view> -->
            <view class='info-des'>您好，{{ infoBbj.teacherName }}考官</view>
          </view>
         
        </view>
        <view class="exam-info"  v-if="infoBbj.nowStudent !== null">
          <u-row style='flex-wrap: wrap;'>
            <u-col :span='6' >
              <view class="info-box">
                <view class="info-box-title">当前日期</view>
                <view class="info-box-name">{{ nowDate }}</view>
              </view>
            </u-col>
            <u-col :span='12'>
              <view class="info-box">
                <view class="info-box-title">考试名称</view>
                <view class="info-box-name">{{ infoBbj.recordsName }} <text v-if="infoBbj.type !== 'D类'">/ 第 {{ infoBbj.examOrder }} 次</text></view>
              </view>
            </u-col>
            <u-col :span='12'>
              <view class="info-box">
                <view class="info-box-title">考试时间</view>
                <view class="info-box-name" v-if="infoBbj.examStartDate">{{ infoBbj.examStartDate.substring(5,16) }} ~ {{ infoBbj.examEndDate.substring(10,16) }}</view>
              </view>
            </u-col>
            <u-col :span='12' style="display: flex;">
              <view style="display: flex;">
                <view class="info-box">
                  <view class="info-box-title">组/轮</view>
                  <view class="info-box-name">{{ infoBbj.nowStudent.team }}   第 {{ infoBbj.round }} 轮（共 {{ infoBbj.totalRound }} 轮）</view>
                </view>
                <view class="info-box" style="padding-left: 20px;">
                  <view class="info-box-title" style="width: 50px">考站</view>
                  <view class="info-box-name">{{ infoBbj.stationName }}</view>
                </view>
              </view>
             
            </u-col>
            <!-- <u-col :span='3'>
              <view class="info-box">
                <view class="info-box-title" style="width: 50px">考站</view>
                <view class="info-box-name">{{ infoBbj.stationName }}</view>
              </view>
            </u-col> -->
            <u-col :span='12'>
              <view class="info-box">
                <view class="info-box-title">校验方式</view>
                <!-- 扫码 ifSaoMa 1: 不扫码 0:扫码 -->
                <!--  ifAnonymous 1: 匿名 0:不匿名 -->
                <view class="info-box-name" v-if='String(infoBbj.ifSaoma) === "0"'>通过扫描考生二维码校验学生信息</view>
                <view class="info-box-name" v-if='String(infoBbj.ifSaoma) === "1"'>通过考生序号或姓名校验学生信息</view>
                <view class="info-box-name" v-if='String(infoBbj.ifSaoma) === "null"'>通过考生序号或姓名校验学生信息</view>
              </view>
            </u-col>
            <u-col :span='12' @click="examHandle">
              <view class="info-box">
                <view class="info-box-title">当前考题</view>
                <view class="info-box-name" v-if="examName" >{{ examName }} </view>
                <view class="icon iconfont icon-arrow_forward" style="color:#00796B;font-weight: 600;padding-left: 10rpx;">
                </view>
              </view>
            </u-col>
            <!-- <u-col :span='6'>
              <view class="info-box">
                <view class="info-box-title">是否匿名</view>
                <view class="info-box-name">{{ infoBbj.ifAnonymous === '1' ? '是' : '否' }}</view>
              </view>
            </u-col> -->
            <!-- <u-col :span='6'>
              <view class="info-box">
                <view class="info-box-title">考试时间</view>
                <view class="info-box-name" v-if="infoBbj.examStartDate">{{ infoBbj.examStartDate.substring(5,16) }} ~ {{ infoBbj.examEndDate.substring(10,16) }}</view>
              </view>
            </u-col> -->
            <!-- <u-col :span='6'>
              <view class="info-box">
                <view class="info-box-title">满分</view>
                <view class="info-box-name">100分</view>
              </view>
            </u-col> -->
          </u-row>
          <!-- <view class="lun">
            <text>共记</text> 
            <text class="weightBlod padding10">{{ infoBbj.totalRound }}</text>
            <text>轮</text>
            <text class="paddingLeft34">当前轮次：</text>
            <text>第</text>
            <text class="weightBlod padding10">{{ infoBbj.round }}</text>
            <text>轮</text>
            <text>第</text>
            <text class="weightBlod padding10">{{ infoBbj.scene }}</text>
            <text>次</text>
            <text class="paddingLeft34">本轮已考人数情况：</text>
            <text class="weightBlod padding10" v-if="infoBbj">{{ infoBbj.finishStudents.length }}</text>
            <text  v-if="infoBbj">/ {{ infoBbj.finishStudents.length + infoBbj.unFinishStudents.length }}</text>
          </view> -->
        </view>
        <u-picker :show="examShow" :columns="examColumns" keyName="examName" confirmColor="#00796B" @confirm='confirmHandle' @cancel='examShow = false'></u-picker>
        <view class="exam-detail"  v-if="infoBbj.nowStudent !== null">
          <view class="exam-title">考试情况</view>
          <view class="exam-box">
            <view class="exam-next">
              <view>{{ infoBbj.nowStudent.status == '0' ? '待考考生': infoBbj.nowStudent.status == '1' ? '下一位考生' : infoBbj.nowStudent.status == '2' ? '考生考试中' : infoBbj.nowStudent.status == '4' ? '考生缺考' : '暂无状态'}}</view>
              <view>{{ infoBbj.ifAnonymous === '1' ? infoBbj.nowStudent.anonymousNumber : `${infoBbj.nowStudent.studentName} (序号：${infoBbj.nowStudent.anonymousNumber})` }}</view>
            </view>
            <view class="student-box">
              <view class="student-left">
                <view class="student-title">
                  <view>
                    待考
                    <text style="color: #777;font-size: 16px;font-weight: 400;padding-left: 4px;">({{ infoBbj.unFinishStudents.length }})</text>
                  </view>
                  <view class="No">考生编号</view>
                </view>
                <view class="student-list" v-if="infoBbj.unFinishStudents.length > 0">
                  <view v-for="(item,index) in infoBbj.unFinishStudents" :key="index" class="list-inner">
                    <view>第 {{ item.round }} 轮 <text v-if="infoBbj.type !== 'D类'"> 第 {{ item.scene }} 次 </text></view>
                    <view style="font-weight: 600;"> {{ infoBbj.ifAnonymous === '1' ? item.anonymousNumber : `${item.studentName} (序号：${item.anonymousNumber})` }}</view>
                  </view>
                </view>
                <view class="student-list" v-else style="height: 140px;color: #fff;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                  <view class="icon iconfont icon-zanwushuju-copy" style="font-size: 40px;"></view>
                  无数据
                </view>
              </view>
              <view class="student-left student-right student-right2">
                <view class="student-title">
                  <view>
                    已考
                    <text style="color: #777;font-size: 16px;font-weight: 400;padding-left: 4px;">({{ infoBbj.finishStudents.length }})</text>
                  </view>
                  <view class="No">考生编号</view>
                </view>
                <view class="student-list" v-if="infoBbj.finishStudents.length > 0">
                  <view v-for="(item,index) in infoBbj.finishStudents" :key="index" class="list-inner" @click="toThisStudent(item)">
                    <view>第 {{ item.round }} 轮 <text v-if="infoBbj.type !== 'D类'"> 第 {{ item.scene }} 次 </text></view>
                    <view class="isTestStudent" style="font-weight: 600;"> {{ infoBbj.ifAnonymous === '1' ? item.anonymousNumber : `${item.studentName} (序号：${item.anonymousNumber})`}}</view>
                  </view>
                </view>
                <view class="student-list" v-else style="height: 140px;color: #fff;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                  <view class="icon iconfont icon-zanwushuju-copy" style="font-size: 40px;"></view>
                  无数据
                </view>
              </view>
              <view class="student-left student-right">
                <view class="student-title">
                  <view>
                    缺考
                    <text style="color: #777;font-size: 16px;font-weight: 400;padding-left: 4px;">({{ infoBbj.qkStudents.length }})</text>
                  </view>
                  <view class="No">考生编号</view>
                </view>
                <view class="student-list" v-if="infoBbj.qkStudents.length > 0">
                  <view v-for="(item,index) in infoBbj.qkStudents" :key="index" class="list-inner">
                    <view>第 {{ item.round }} 轮 <text v-if="infoBbj.type !== 'D类'"> 第 {{ item.scene }} 次</text></view>
                    <view style="font-weight: 600;"> {{ infoBbj.ifAnonymous === '1' ? item.anonymousNumber : `${item.studentName} (序号：${item.anonymousNumber})` }}</view>
                  </view>
                </view>
                <view class="student-list" v-else style="height: 140px;color: #fff;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                  <view class="icon iconfont icon-zanwushuju-copy" style="font-size: 40px;"></view>
                  无数据
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-btn" v-if="infoBbj.nowStudent !== null">
        <view class="btn-inner">
          <u-button type="primary" shape='circle' @click="missFlagHandle" :loading="missFlagLoading" text="标记考生缺考" size='large' :plain="true" style="margin-right: 16px;"></u-button>
          <u-button type="primary" shape='circle' v-if="infoBbj.ifAnonymous === '1' || infoBbj.ifSaoma === '1'" @click="studentComeHandle" text="考生已到" size='large' style="margin-left: 16px;" color="linear-gradient(to right, #0DCD9D, #006AB5)"></u-button>
          <u-button type="primary" shape='circle' v-else @click="checkoutHandle" :text="infoBbj.nowStudent.status == 1 ? '扫描二维码': infoBbj.nowStudent.status == 2 ? '继续考试': '扫描考生二维码'" size='large' style="margin-left: 16px;" color="linear-gradient(to right, #0DCD9D, #006AB5)"></u-button>
        </view>
      </view>
      <view class="log-box" v-if="infoBbj.nowStudent !== null">
        <u-modal :show="missFlag" @confirm="confirmQueKao" @cancel="cancelQueKao" ref="uModal" confirmColor='#f00b0be6' :showCancelButton='true' :asyncClose="true" width='360px'>
          <view style="font-size: 20px;padding: 20px 0;display: flex;align-items: center;">
            <text class="icon iconfont icon-tixing" style="font-size: 24px;padding-right: 4px;color: #f00b0be6;"></text>
            请确认 {{ infoBbj.ifAnonymous === '1' ? infoBbj.nowStudent.anonymousNumber : `${infoBbj.nowStudent.studentName} (序号：${infoBbj.nowStudent.anonymousNumber})` }} 是否缺考？
          </view>
        </u-modal>
        <u-modal :show="diffFlag" @confirm="diffFlag = false" @cancel="differentCancel" ref="uModal" confirmColor='#00796B' :showCancelButton='false' :asyncClose="false" width='660px'>
          <view class="differentContent">
            <view class="studentInfo-inner">
              <view class="success-inner error-inner">
                <!-- <view class="icon iconfont icon-butongguo2"></view> -->
                考生身份信息核验失败！
              </view>
            </view>

            <view class="student-box student-box-error">
              <view class="title">扫描考生信息</view>
              <view class="student-inner-box" v-if="scanStudentInfo.studentName">
                <view class="des">
                  <text class="des-title">考生姓名：</text>
                  <text>{{ scanStudentInfo.studentName }}</text>
                </view>
                <view class="des">
                  <text class="des-title">身份证号：</text>
                  <text>{{ scanStudentInfo.studentIdcard }}</text>
                </view>
                <view class="des">
                  <text class="des-title">手机号：</text>
                  <text>{{ scanStudentInfo.studentMobile }}</text>
                </view>
                <view class="des">
                  <!-- <text class="info-des">第<text></text>3考站</text> -->
                  <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ scanStudentInfo.round }}</text>轮</text>
                  <text v-if="infoBbj.type !== 'D类'" class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ scanStudentInfo.scene }}</text>次</text>
                  <text class="info-des">考站：<text style="font-size: 24px;font-weight: 600;padding: 0 0px;">{{ scanStudentInfo.recordsStationName }}</text></text>
                </view>
              </view>
              <view class="student-inner-box" v-else>
                <view class="noStudent">
                  非本场考试二维码或非本轮次考生
                </view>
              </view>
            </view>


            <view class="student-box">
              <view class="title">应考考生信息</view>
              <view class="student-inner-box">
                <view class="des">
                  <text class="des-title">考生姓名：</text>
                  <text>{{ infoBbj.nowStudent.studentName }}</text>
                </view>
                <view class="des">
                  <text class="des-title">身份证号：</text>
                  <text>{{ infoBbj.nowStudent.studentIdcard }}</text>
                </view>
                <view class="des">
                  <text class="des-title">手机号：</text>
                  <text>{{ infoBbj.nowStudent.studentMobile }}</text>
                </view>
                <view class="des">
                  <!-- <text class="info-des">第<text></text>3考站</text> -->
                  <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.round }}</text>轮</text>
                  <text v-if="infoBbj.type !== 'D类'" class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.scene }}</text>次</text>
                  <text class="info-des">考站：<text style="font-size: 24px;font-weight: 600;padding: 0 0px;">{{ infoBbj.nowStudent.recordsStationName }}</text></text>
                </view>
              </view>
            </view>
          </view>
        </u-modal>
        <!-- 核验成功提示框 -->
        <u-modal :show="successFlag" @confirm="successToNext" @cancel="successFlag = false" ref="uModal" confirmColor='#00796B' :showCancelButton='false' :asyncClose="false" width='660px'>
          <view class="differentContent">
            <view class="studentInfo-inner">
              <view class="success-inner">
                <!-- <view class="icon iconfont icon-butongguo2"></view> -->
                考生身份信息核验成功！
              </view>
            </view>

            <view class="student-box student-box-error">
              <view class="title">扫描考生信息</view>
              <view class="student-inner-box" v-if="infoBbj.nowStudent.studentName">
                <view class="des">
                  <text class="des-title">考生姓名：</text>
                  <text>{{ infoBbj.nowStudent.studentName }}</text>
                </view>
                <view class="des">
                  <text class="des-title">身份证号：</text>
                  <text>{{ infoBbj.nowStudent.studentIdcard }}</text>
                </view>
                <view class="des">
                  <text class="des-title">手机号：</text>
                  <text>{{ infoBbj.nowStudent.studentMobile }}</text>
                </view>
                <view class="des">
                  <!-- <text class="info-des">第<text></text>3考站</text> -->
                  <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.round }}</text>轮</text>
                  <text v-if="infoBbj.type !== 'D类'" class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.scene }}</text>次</text>
                  <text class="info-des">考站：<text style="font-size: 24px;font-weight: 600;padding: 0 0px;">{{ infoBbj.nowStudent.recordsStationName }}</text></text>
                </view>
              </view>
            </view>
            <view class="student-box">
              <view class="title">应考考生信息</view>
              <view class="student-inner-box">
                <view class="des">
                  <text class="des-title">考生姓名：</text>
                  <text>{{ infoBbj.nowStudent.studentName }}</text>
                </view>
                <view class="des">
                  <text class="des-title">身份证号：</text>
                  <text>{{ infoBbj.nowStudent.studentIdcard }}</text>
                </view>
                <view class="des">
                  <text class="des-title">手机号：</text>
                  <text>{{ infoBbj.nowStudent.studentMobile }}</text>
                </view>
                <view class="des">
                  <!-- <text class="info-des">第<text></text>3考站</text> -->
                  <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.round }}</text>轮</text>
                  <text v-if="infoBbj.type !== 'D类'" class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ infoBbj.nowStudent.scene }}</text>次</text>
                  <text class="info-des">考站：<text style="font-size: 24px;font-weight: 600;padding: 0 0px;">{{ infoBbj.nowStudent.recordsStationName }}</text></text>
                </view>
              </view>
            </view>
          </view>
        </u-modal>

        <!-- 查看修改成绩 start 需要先判断是否可以修改成绩-->
        <u-modal :show="updateFlag" @confirm="updateToNext" @cancel="updateFlag = false" ref="uModal" :confirmText="isUpdateFlag ? '查看考试成绩' : '查看/修改考试成绩'" cancelText="申请修改考试成绩" cancelColor="#FF1744" confirmColor='#00796B' :showCancelButton='isUpdateFlag' :asyncClose="false" width='460px'>
          <view class="differentContent">
            555
          </view>
        </u-modal>
      </view>
      <quick-message ref="message"></quick-message>
      <view v-if="infoBbj.nowStudent === null" class="noMsg">
        <view>考试未开始，请等待...</view>
        <view class="icon iconfont icon-zanwukaoshi"></view>
        <!-- <u-modal :show="infoBbj.nowStudent === null" @confirm="confirmBack" ref="uModal" confirmColor='#00796B' :showCancelButton='false' :asyncClose="true" width='360px'>
          <view style="font-size: 20px;padding: 20px 0;display: flex;align-items: center;">
            <text class="icon iconfont icon-tixing" style="font-size: 24px;padding-right: 4px;"></text>
            本场考试已结束，请退出。
          </view>
        </u-modal> -->
      </view>
    </view>
    <view v-if="judgeFlag !== 'false' && judgeFlag !== ''">
      <view class="content-box" style="padding-bottom: 2rpx;padding-top: 20rpx">
        <view class="teacher-info">
          <view class="info-left">
            <!-- <view class='img-box'></view> -->
            <view class='info-des'>您好，{{ userInfo.userName }}考官</view>
          </view>
        </view>
      </view>
    </view> 
    <view class="borrom-box" v-if="judgeFlag !== 'false' && judgeFlag !== ''">
      <view class='box1'>
        <view class="box-top">
          <view class="title">功能区</view>
          <view class="top-inner">
            <view class="nav-list margin-top">
              <navigator hover-class="none" :class="'nav-li bg-kuxuan doingActive' + index"
                v-for="(item, index) in kuxuan" :key="index" @click="toLink(item.value)">
                <view class="nav-name">{{ item.name }}</view>
                <text :class="'icon iconfont icon-' + item.icon"></text>
                <view v-if="index === 0" class="pos">{{ totalBak }}</view>
              </navigator>
            </view>
          </view>
          <!-- <view class="content-box1">
            <view class="li-box" @click="toLink('/pages/home/list/auditExam')">
              <view>修改成绩审核</view>
              <view class="icon iconfont icon-xinxixiugaishenhe"></view>
              <view class="pos"> 10 </view>
            </view>
            <view class="li-box li-box2" @click="toLink('/pages/home/list/historyExam')">
              <view>历史成绩</view>
              <view class="icon iconfont icon-l-credits"></view>
            </view>
          </view> -->
        </view>
      </view>
    </view>

    <view class="log-box">
      <u-modal :show="logOutShow" @confirm="confirm" @cancel="cancel" ref="uModal" confirmColor='#00796B' :showCancelButton='true' :asyncClose="true" width='260px'>
        <view style="font-size: 16px;padding: 0 0;display: flex;align-items: center;">
          <text class="icon iconfont icon-tixing" style="font-size: 20px;padding-right: 4px;"></text>
          请确认是否退出？
        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  name: "Components",
  data() {
    return {
      logOutShow: false,
      totalBak: 0,
      nowDate: '',
      infoBbj: {},
      missFlag: false,
      diffFlag: false,
      successFlag: false,
      updateFlag: false,
      isUpdateFlag: true,
      scanStudentInfo: {},
      missFlagLoading: false, // 缺考loading
      intervalId: null,
      examShow: false,
      examColumns: [],
      defaultIndex: [],
      examinationId: '',
      examName: '',
      judgeFlag: '',
      userInfo: {},
      kuxuan: [
        {
          title: "doing",
          name: "修改成绩审核",
          icon: 'xinxixiugaishenhe',
          color: "",
          value: '/pages/home/list/auditExam'
        },
        {
          title: "done",
          name: "成绩修改历史",
          icon: 'l-credits',
          color: "",
          value: '/pages/home/list/historyEdit'
        },
        {
          title: "done",
          name: "历史成绩",
          icon: 'l-credits',
          color: "",
          value: '/pages/home/list/historyExam'
        },
      ],
    };
  },
  onShow() {
    // 页面显示时触发，可以在这里执行路由变化后的逻辑
    // console.log('页面显示 Home');
    this.judgeFlag = hccmStore.getJudge()
    this.userInfo = hccmStore.getUser()
    if(hccmStore.getJudge('judge') === 'false'){
      this.getStationExaminationList()
      this.startInterval()
      this.getNow()
    }
    this.getCount()
  },
  onHide(){
		this.stopInterval();
	},
	onUnload() {
    this.stopInterval();
	},
	beforeDestroy() {
    // 清除计时器
		this.stopInterval();
	},
  methods: {
    getCount () {
      mRequest.recordsstudentexamination({
        limit: 1,
        page: 1,
        ifPermission: '0',
        orderSql: 'creat_date desc',
      }).then(res => {
        this.totalBak = res.data.total
      })
    },
    getNow(){
      let datee = new Date()
      let year = datee.getFullYear()
      let month = datee.getMonth() + 1 < 10 ? '0' + Number(datee.getMonth() + 1) : Number(datee.getMonth()) + 1
      let day = datee.getDate() < 10 ? '0' + datee.getDate() : datee.getDate()
      this.nowDate = `${year}年 ${month}月 ${day} 日` 
    },
    confirmBack(){
      uni.removeStorageSync('phone_token')
      this.$refs.message.show({
        type:'success', //String 默认default
        msg:'登出成功', //String 显示内容 *
        direction:'top', //String 默认顶部显示
        icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
        mask:true, //Boolean 遮罩（默认false没有遮罩）
        time:1000, //Number|Boolean 默认3000/false为不自动关闭
        customStyle:{ //自定义样式
          // color:'#FFFFFF', //字体图标色
          // backgroundColor:'rgba(0,0,0,.5)', //背景色
          fontSize: 12,
        }, 
        iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
        iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
      })
      this.logOutShow = false
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null
      }
      this.stopInterval()
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 1000);
    },
    startInterval() {
      this.intervalId = setInterval(() => {
				this.getInspectList()
      }, 2000);
    },
    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null
      }
    },
    
    // 查看当前考生考试情况
    toThisStudent (val) {
      console.log(val)
      this.stopInterval()
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/home/exam/updatePlaying?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${val.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
        });
      },100)
      
      // this.updateFlag = true
    },
    // 
    updateToNext () {
      
      this.updateFlag = false
    },
    // 更新当前考生的 考题id recordsStationStudentSaveOrUpdate
    recordsStationStudentSaveOrUpdateHandle(){
      let params = {
        id: this.infoBbj.nowStudent.id,
        examinationId: this.examinationId
      }
      mRequest.recordsStationStudentSaveOrUpdate(params).then(res => {
        this.examShow = false
        // this.getStationExaminationList()
      })
    },
    getInspectList(){
      mRequest.getRealTimeData({
        recordsTeacherId: hccmStore.getUser().teacherId,
      }).then(res=>{
        this.infoBbj = res.data
        if(res.data.nowStudent && res.data.nowStudent.examinationId){
          this.examinationId = res.data.nowStudent.examinationId
          this.examName = this.computedName(this.examinationId)
          // this.examColumns[0].map((item, index) => {
          //   if(item.examinationId === res.data.nowStudent.examinationId){
          //     this.defaultIndex = [index]
          //   }
          // })
        } else {
          setTimeout( () => {
            this.recordsStationStudentSaveOrUpdateHandle()
          },5)
        }
      })
    },
    computedName(id){
      // console.log('this.examColumns[0].',this.examColumns[0])
      let arr = this.examColumns[0].filter(v => {
        return v.examinationId === id
      })[0]
      return arr.examName
    },
    getStationExaminationList(){
      mRequest.getRealTimeData({
        recordsTeacherId: hccmStore.getUser().teacherId,
      }).then(res=>{
        let infoBbj = res.data
        mRequest.stationExaminationList({
          recordsStationId: infoBbj.recordsStationId,
        }).then(ress=>{
          this.examColumns = [ress.data.records]
          this.examinationId = ress.data.records[0].examinationId
          this.examName = ress.data.records[0].examName
          this.getInspectList()
        })
      })
    },
    confirmHandle(val){
      this.examinationId = val.value[0].examinationId
      this.examName = val.value[0].examName
      this.recordsStationStudentSaveOrUpdateHandle()
      
    },
    examHandle(){
      this.examShow = true
    },
    cancelQueKao(){
      this.missFlag = false
    },
    confirmQueKao(){
      mRequest.missExam({
        id: this.infoBbj.nowStudent.id,
        status: '4'
      }).then(res=>{
        this.missFlag = false
        this.$refs.message.show({
          type:'success', //String 默认default
          msg:'此考生缺考标记成功', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        this.getInspectList()
      })
    },
    differentCancel(){
      this.diffFlag = false
    },
    missFlagHandle(){
      // 1:就绪    2:考试中  3:考试结束    4:缺考 
      this.missFlagLoading = true
      if(this.infoBbj.nowStudent.status == 2 || this.infoBbj.nowStudent.status == 3){
        this.$refs.message.show({
          type:'warning', //String 默认default
          msg:'此考生正在考试，不能进行缺考标记', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        this.missFlagLoading = false

      }else if( this.infoBbj.nowStudent.status == 4) {
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'此考生已缺考，请勿重复标记', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        this.missFlagLoading = false
      } else {
        this.missFlag = true
        this.missFlagLoading = false
      }
    },
    // 扫描学生信息
    getStudentInfo(studentId){
      // mRequest.recordsStationStudentList({studentId,recordsDateId:this.infoBbj.recordsDateId,recordsStationId: this.infoBbj.recordsStationId}).then(res=>{
      mRequest.recordsStationStudentList({studentId:studentId,recordsId:this.infoBbj.nowStudent.recordsId,round:this.infoBbj.nowStudent.round,scene:this.infoBbj.nowStudent.scene}).then(res=>{
        if(res.data.records.length > 0){
          this.scanStudentInfo = res.data.records[0]
        }else{
          this.scanStudentInfo = {}
        }
      })
    },
    studentComeHandle(){
      if(!this.infoBbj.nowStudent.studentId){
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'此号未被抽取，请等待或点击缺考', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
      }else{
        if(this.examinationId !== this.infoBbj.nowStudent.examinationId) {
          this.$refs.message.show({
            type:'error', //String 默认default
            msg:'请先确认当前考题与考生考题是否一致', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:1000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
          return 
        }
        if(this.infoBbj.nowStudent.status === '2'){
          uni.navigateTo({
            url: `/pages/home/exam/playing?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
          });
        }else{
          uni.navigateTo({
            url: `/pages/home/studentInfo?anonymousNumber=${this.infoBbj.nowStudent.anonymousNumber}&ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
          })
        }
        
      }
    },
    // 考生信息一致，跳转到下一步
    successToNext () {
      this.successFlag = false
      uni.navigateTo({
        url: `/pages/home/studentInfo?anonymousNumber=${this.infoBbj.nowStudent.anonymousNumber}&ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.infoBbj.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
      })
    },
    // 考生信息核验
    checkoutHandle(){
      // 如果 当前考生  status1 （准备就绪） || 2（在考） 直接跳转 到考试页面
      // 只有实名制的考生且status为1的时候才进行扫码，其他的走正常流程
      if(this.infoBbj.ifAnonymous === '0' && this.infoBbj.nowStudent.status == 1){
      // 默认用原生
      // uni.scanCode({
      //   success: (res) => {
      //     let resData = JSON.parse(res.result)
      //     console.log(res.result, this.infoBbj.nowStudent)
      //     this.diffFlag = true
      //     this.getStudentInfo(resData.studentId)
      //     setTimeout(() => {
      //       // 信息比对
      //       if(this.infoBbj.nowStudent.studentId !== resData.studentId){
      //         this.diffFlag = true
      //         this.getStudentInfo(resData.studentId)
      //       }else{
      //         if(this.examinationId !== this.infoBbj.nowStudent.examinationId) {
      //           this.$refs.message.show({
      //             type:'error', //String 默认default
      //             msg:'请先确认当前考题与考生考题是否一致', //String 显示内容 *
      //             direction:'top', //String 默认顶部显示
      //             icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
      //             mask:true, //Boolean 遮罩（默认false没有遮罩）
      //             time:1000, //Number|Boolean 默认3000/false为不自动关闭
      //             customStyle:{ //自定义样式
      //               // color:'#FFFFFF', //字体图标色
      //               // backgroundColor:'rgba(0,0,0,.5)', //背景色
      //               fontSize: 12,
      //             }, 
      //             iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
      //             iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
      //           })
      //           return 
      //         }
      //         // hccmStore.setCurrentStudent(this.infoBbj.nowStudent)
      //         // TODO 这里需要扫码  如果 status是0（待考）1（准备就绪） 时跳转到信息校验页面 如果是2（在考）需要跳转到考试页面
      //         if(this.infoBbj.nowStudent.status == 0 || this.infoBbj.nowStudent.status == 1 ){
      //           // console.log(this.infoBbj.nowStudent.status)
      //           // uni.navigateTo({
      //           //   url: `/pages/home/studentInfo?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.infoBbj.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
      //           // })
      //           // 需要有提示框
      //           this.successFlag = true
      //         }else if(this.infoBbj.nowStudent.status == 2 ){
      //           uni.navigateTo({
      //             url: `/pages/home/exam/playing?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.infoBbj.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
      //           })
      //         }
      //       }
      //     }, 10)
      //   }
      // });
      // return
      var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
      mpaasScanModule.mpaasScan({
          // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
          'scanType':  ['qrCode','barCode'],
          // 是否隐藏相册，默认false不隐藏
          'hideAlbum': true,
          'preferPosition': 'front',
          'onlyFromCamera': true
        },
        (ret) => {
          let resData = JSON.parse(ret.resp_result)
          setTimeout(() => {
            // 信息比对
            if(this.infoBbj.nowStudent.studentId !== resData.studentId){
              this.diffFlag = true
              this.getStudentInfo(resData.studentId)
            }else{
              if(this.examinationId !== this.infoBbj.nowStudent.examinationId) {
                this.$refs.message.show({
                  type:'error', //String 默认default
                  msg:'请先确认当前考题与考生考题是否一致', //String 显示内容 *
                  direction:'top', //String 默认顶部显示
                  icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
                  mask:true, //Boolean 遮罩（默认false没有遮罩）
                  time:1000, //Number|Boolean 默认3000/false为不自动关闭
                  customStyle:{ //自定义样式
                    // color:'#FFFFFF', //字体图标色
                    // backgroundColor:'rgba(0,0,0,.5)', //背景色
                    fontSize: 12,
                  }, 
                  iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
                  iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
                })
                return 
              }
              // hccmStore.setCurrentStudent(this.infoBbj.nowStudent)
              // TODO 这里需要扫码  如果 status是0（待考）1（准备就绪） 时跳转到信息校验页面 如果是2（在考）需要跳转到考试页面
              if(this.infoBbj.nowStudent.status == 0 || this.infoBbj.nowStudent.status == 1 ){
                // console.log(this.infoBbj.nowStudent.status)
                // uni.navigateTo({
                //   url: `/pages/home/studentInfo?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.infoBbj.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
                // })
                // 需要有提示框
                this.successFlag = true
              }else if(this.infoBbj.nowStudent.status == 2 ){
                uni.navigateTo({
                  url: `/pages/home/exam/playing?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
                })
              }
            }
          }, 100)
        })
      }else{
        if(this.examinationId !== this.infoBbj.nowStudent.examinationId) {
          this.$refs.message.show({
            type:'error', //String 默认default
            msg:'请先确认当前考题与考生考题是否一致', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:1000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
          return 
        }
        if(this.infoBbj.nowStudent.status == 1) {
          // console.log('准备就绪', this.infoBbj)
          // return
          uni.navigateTo({
            url: `/pages/home/studentInfo?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
          })
        } else if ( this.infoBbj.nowStudent.status == 2 ){
          uni.navigateTo({
            url: `/pages/home/exam/playing?ifAnonymous=${this.infoBbj.ifAnonymous}&scanStudentId=${this.infoBbj.nowStudent.id}&examinationId=${this.examinationId}&examScoreMin=${this.infoBbj.examScoreMin}`,
          })
        } else if (this.infoBbj.nowStudent.status == 4) {
          this.$refs.message.show({
            type:'error', //String 默认default
            msg:'此考生已缺考，请等待下一轮考试', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:1000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
        }
      }
      
    },
    toLink( val ){
      uni.navigateTo({
        url: val,
      })
    },
    logOutHandle(){
      this.logOutShow = true
    },
    confirm(){
      this.$refs.message.show({
        type:'success', //String 默认default
        msg:'登出成功', //String 显示内容 *
        direction:'top', //String 默认顶部显示
        icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
        mask:true, //Boolean 遮罩（默认false没有遮罩）
        time:1000, //Number|Boolean 默认3000/false为不自动关闭
        customStyle:{ //自定义样式
          // color:'#FFFFFF', //字体图标色
          // backgroundColor:'rgba(0,0,0,.5)', //背景色
          fontSize: 12,
        }, 
        iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
        iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
      })
      this.logOutShow = false
      this.$emit('stopInterval')
      setTimeout(() => {
        uni.removeStorageSync('phone_token')
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 1000);
    },
    cancel(){
      this.logOutShow = false
    }
  }
};
</script>

<style lang="scss">
.components-home{
  padding-top: 80px;
  padding-bottom: 60px;
  font-size: 14px;
  flex-direction: column;
  // background: url('@/static/img/bg.png') no-repeat;
  // background-color: pink;
  // background-position-y: 2%;
  // background-size: 100% auto;
  // height: calc( 100vh - 200px);
  box-sizing: border-box;
  background-color: #F2FCFC;
  .indexBg{
    height: 138rpx;
    // width: 100%;
    // background: pink;
    margin: 0 26rpx;
    background-image: url('@/static/img/indexBg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80rpx 0 40rpx;
    .indexImg{
      width: 268rpx;
      height: 58rpx;
    }
    .indexIcon{
      width: 130rpx;
      height: 130rpx;
    }
  }
  .content-box{
    padding: 32px 24px;
    .teacher-info{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24px;
      color: #333;
      font-weight: 600;
      height: 38px;
      margin-bottom: 24px;
      .info-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        .img-box{
          height: 38px;
          width: 38px;
          background: #DEF2FF;
          border-radius: 100%;
          margin-right: 13px;
        }
        .info-des{
          color: #333;
          font-size: 32rpx;
          color: #333333;
          font-family: 'PingFang SC-Regular';
          font-weight: 400;

        }
      }
      .station{
        background: #E2E2E2;
        border-radius: 4px;
        font-family: 'PingFang SC, PingFang SC';
        font-size: 20px;
        color: #333333;
        height: 38px;
        padding: 0 10px;
        line-height: 38px;
      }
    }

    .exam-info{
      padding: 24px;
      border-radius: 12px;
      border: 1px solid #0DCD9D;
      background: #FFFFFF;
      .info-box{
        height: 24px;
        line-height: 24px;
        padding-bottom: 15px;
        font-weight: 400;
        font-size: 17px;
        color: #777777;
        display: flex;
        align-items: center;
        .info-box-title{
          width: 110px;
          color: #666666 !important;
        }
        .info-box-name{
          font-weight: 500;
          font-size: 17px;
          color: #333333 !important;
        }
      }
      .lun{
        padding-top: 16px;
        font-size: 18px;
        border-top: 1px solid #E2E2E2;
        color: #777777;
        .weightBlod{
          font-weight: 600;
          color: #333;

        }
        .padding10{
          padding: 6px;
        }
        .paddingLeft34{
          padding-left: 34px;
        }
      }
    }

    .exam-detail{
      margin-top: 20px;
      border-radius: 12px;
      border: 1px solid #F1F3F4;
      background: #FFFFFF;
      .exam-title{
        padding: 27px 24px 19px 24px;
        border-bottom: 1px solid #E2E2E2;
        font-weight: 600;
        font-size: 20px;
        color: #fff;
        background: linear-gradient(to right, #00A5A4 0%, #0DCD9D 100%);
        border-radius: 20px 20px 0 0;
      }
      .exam-box{
        padding: 16px 12px;
        // background: darkcyan;
        .exam-next{
          background: #0DCD9D20;
          height: 54px;
          width: 100%;
          padding: 0 24px;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          align-items: center;
          font-weight: 400;
          font-size: 17px;
          color: #000;
          margin-bottom: 15px;
        }

        .student-box{
          width: 100%;
          background: #fff;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .student-left{
            width: calc(50% - 8px);
            background: #0DCD9D30;
            min-height: 200px;
            max-height: 600px;
            border-radius: 6px;
            .student-list{
              box-sizing: border-box;
              padding: 0 8px;
              margin: 10px;
              .list-inner{
                height: 30px;
                font-size: 12px;
                color: #777777;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // border-bottom: 1px solid  #1a7eb0;
                border-bottom: 1px solid  #F1F3F4;
              }
              .list-inner:last-child{
                border-bottom: none;
                padding-bottom: 20px;
              }
            }
            .isTestStudent{
              color: #006AB5;
              font-weight: 600;
              text-decoration: underline;
            }
          }
          .student-right{
            width: calc(50% - 8px);
            border-radius: 6px;
            background: #00A5A430;
            min-height: 200px;
            max-height: 600px;
          }
          .student-right2{
            background: #48C1A430;
            min-height: 200px;
            max-height: 600px;
            margin: 0 14px;
          }
          
          .student-title{
            padding: 16px 16px 0px 16px;
            font-weight: 600;
            font-size: 18px;
            color: #333333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .No{
              color: #666;
              font-size: 14px;
            }
          }
          
        }
      }
    }
    
  }

  .bottom-btn{
    height: 80px;
    width: 100%;
    background-image: radial-gradient(transparent 1px, #F2FCFC 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(10px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    position: fixed;
    bottom: 0;
    z-index: 1000;
    .btn-inner{
      height: 100%;
      width: 100%;
      background: rgba(255, 255, 255, 0.1);
      border-bottom: 2px solid rgba(0,0,0,0.1);
      box-shadow: #ffffff;
      border-top: 2px solid rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 20px;
      border-radius: 20px 20px 0 0;
    }
  }
  .differentContent{
    width: 1000px;
    max-height: 800px;
    overflow: auto;
    .studentInfo-inner{
      .success-inner{
        padding: 20px;
        background: $u-primary;
        border-radius: 8px;
        font-size: 18px;
        color: #fff;
        font-weight: 600;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .iconfont{
          padding-right: 10px;
        }
      }
      .error-inner{
        background: $u-error;
      }
    }

    .student-box{
      margin-top: 20px;
      border-radius: 8px;
      border: 1px solid $u-primary;
      padding: 20px;
      .title{
        color: $u-primary;
        font-weight: 600;
        text-indent: 10px;
        position: relative;

      }
      .title:before{
        height: 60%;
        width: 3px;
        border-radius: 2px;
        background: $u-primary;
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
      }
      .student-inner-box{
        padding: 10px 0;
        .des{
          padding: 6px 0 ;
          .des-title{
            color: #666;
          }
          .info-des{
            padding-right: 10px;
          }
        }
        .noStudent{
          height: 60px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: 500;
          color: $u-error;
        }
      }
    }

    .student-box-error{
      border: 1px solid $u-error;
      .title{
        color: $u-error;
      }
    }
  }
}
.judgeBox{
  padding-bottom: 0 !important;
}
.noMsg{
  height: calc( 100vh - 242rpx);
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // background: pink;
  .iconfont{
    font-size: 100rpx;
  }
}
.borrom-box{
  height: calc( 100vh - 144rpx);
  width: 100%;
  display: flex;
  flex-direction: column;
  .box1{
    flex: 1;
    // background: #00796B20;
    margin: 8px 10px 8px;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .box-top{
      .title{
        font-size: 30rpx;
        font-weight: 600;
        padding-bottom: 20rpx;
      }
      .content-box1{
        display: flex;
        .li-box{
          width: 240rpx;
          height: 86rpx;
          margin-right: 20rpx;
          background-image: url('@/static/img/nav-bg.png');
          background-size: cover;
          background-position: center;
          background-color:  #00796B;
          box-shadow: 6px 6px 2px 0rpx rgba(0, 0, 0, 0.1);
          border-radius: 10rpx;
          padding: 20rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding-top: 36rpx;
          position: relative;
          .iconfont{
            position: absolute;
            bottom: 10rpx;
            right: 10rpx;
            font-size: 60rpx;
            color: #ffffff80;
          }
          .pos{
            height: 40rpx;
            width: 40rpx;
            color: #fff;
            font-size: 24rpx;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
            background: rgba(255, 23, 68, 0.79);
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .li-box2{
          background-color:  #0097A7;
        }
      }
    }
  }
}
</style>
<style lang='scss'>
  .nav-list {
    display: flex;
    padding: 0px 20px 0px;
    justify-content: center;
  }

  .nav-li {
    padding: 20px 20px 20px 8px;
    border-radius: 6px;
    width: 45%;
    margin: 0 2.5% 8px;
    background-image: url('@/static/img/nav-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .iconfont {
      font-size: 40px;
    }
  }

  .nav-li::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -10%;
    border-radius: 10px;
    opacity: 0.2;
    transform: scale(0.9, 0.9);
  }

  .nav-li.cur {
    color: #fff;
    background: rgb(94, 185, 94);
    box-shadow: 4px 4px 6px rgba(94, 185, 94, 0.4);
  }

  .nav-name {
    font-size: 16px;
    text-transform: Capitalize;
    margin-top: 0;
    padding: 10px 0 14px 20px;
    position: relative;
  }

  .nav-name::before {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 6px;
    background: #fff;
    bottom: 0;
    right: -20px;
    opacity: 0.5;
  }

  .nav-name::after {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 1px;
    background: #fff;
    bottom: 0;
    right: 0;
    opacity: 0.3;
  }

  .nav-name::first-letter {
    font-weight: bold;
    font-size: 24px;
    margin-right: 1px;
  }

  .title-header {
    display: flex;
    font-size: 28px;
    padding-bottom: 40rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* padding: 40rpx 0 0 0; */
    font-weight: bold;
  }

  .title-text {
    background-image: -webkit-linear-gradient(60deg, #388E3C, #26A69A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .title-text-des {
    font-size: 34px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(60deg, $u-grey-darken, $u-blue-grey-darken);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .doingActive0{
    background-color: #00796B;
  }
  .doingActive1{
    background-color: #0097A7;
  }
  .doingActive2{
    background-color: #00a796;
  }
  .pos{
    height: 30px;
    width: 30px;
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: -10px;
    top: -10px;
    background: rgba(255, 23, 68, 0.89);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qr-box {
    height: 200px;
    width: 200px;
    background: #f5f5f5;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      font-size: 60px;
      color: $u-primary;
    }
  }
  :deep(.ua__thead-th){
    font-size: 16px !important;
    height: 40px;
    line-height: 40px;
  }
  :deep(.ua__tbody-td){
    font-size: 14px !important;
    height: 34px;
    line-height: 34px;
  }
  .header-top{
    padding-top: 30px;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    background-image: radial-gradient(transparent 1px, #ffffff 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(10px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    border-radius: 0 0 20rpx 20rpx;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    .header-inner{
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 0 0 20rpx 20rpx;
      font-size: 16px;
      border-bottom: 2px solid rgba(0,0,0,0.1);
      box-shadow: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      .name{
        display: flex;
        align-items: center;
        .headImg{
          height: 31rpx;
          width: 31rpx;
          border-radius: 100%;
          background: #F2FCFC;
          margin-right: 10rpx;
          background-image: url('@/static/img/head.png');
          background-size: 100% 100%;
        }
        font-weight: 500;
      }
      .logOut{
        color: $u-primary;
        font-weight: 500;
        font-size: 12px;
        .logOutInner{
          padding: 6px 14px;
          border: 1px solid $u-primary;
          border-radius: 100px;
        }
      }
    }
  }
  .log-box{
    .u-popup{
      .iconfont{
        color: $u-error;
      }
    }
  }
</style>